<template>

  <AdvertBtn @add-advert="onAddAdvert" @batch-remove="onBatchRemove"/>

  <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">

    <template #status="{ row, index }">
      <DotTag type="primary" v-if="row.state">正常</DotTag>
      <DotTag type="error" v-else>失效</DotTag>
    </template>


    <template #url="{ row, index }">
      <Image :src="$api.previewPath(row.url)" fit="contain" width="80px" height="60px" :initial-index="0"/>
    </template>

    <template #action="{ row, index }">
      <Button type="primary" v-auth:advert:modify icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editAdvert(row)">
        修改
      </Button>
      <Button type="error" v-auth:advert:remove icon="ios-remove-circle-outline" size="small" @click="remove(row, index)">移除</Button>
    </template>

  </Table>

  <AdvertForm v-model="drawer.state" v-if="drawer.state"
              :title="drawer.title" :row="drawer.row" @refresh-data="queryAdvertList"/>

</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import DotTag from '../components/DotTag.vue'
import AdvertBtn from '../components/advert/AdvertBtn.vue';
import AdvertForm from '../components/advert/AdvertForm.vue';
import Tips from '../message';
import API from "../api/index.js";

const drawer = ref({title: "", state: false, row: {}});

const columns = reactive([
  {
    type: "selection",
    width: 60
  },
  {
    title: "系统名",
    key: "sysName",
    width: 240,
  },
  {
    title: "系统编号",
    key: "remark",
    width: 150,
  },
  {
    title: "广告图片",
    slot: "url",
    width: 120,
  },
  {
    title: "广告地址",
    key: "linkUrl",
  },
  {
    title: "状态",
    slot: "status",
    align: "center",
    width: 100,
  },
  {
    title: "操作",
    align: "center",
    slot: "action",
    width: 180,
  },
]);

// 要修改 data, 可以通过 data.value = ...
const data = ref(reactive([]));

// 定义一个数据、存储复选框选中的所有元素
const selection = ref([]);

onMounted(() => {
  queryAdvertList();
});

function queryAdvertList() {
  API.queryAdverts().then(({data:ret}) => {
    if (ret.status) {
      data.value = ret.list;
    }
  })
}


// 添加轮播图
function onAddAdvert() {
  drawer.value.title = "添加广告";
  drawer.value.state = true;
  drawer.value.row = {state: true, url: "", linkUrl: "", sysId: null};
}

// 批量删除
function onBatchRemove() {
  if (selection.value.length == 0) {
    Tips.warning("请至少选择一个需要删除的广告数据");
    return;
  }
  // 获取要删除的所有ID 数据
  let ids = selection.value.map(s => s.id);
  Tips.confirm("您确定要删除选中的所有广告吗?").then(() => {
    API.batchRemoveAdvert(ids).then(({data:ret}) => {
      if (ret.status) {
        Tips.success(ret.message);
        queryAdvertList(); // 重新查询轮播图
      }
    })
  })
}

// 修改
function editAdvert(row) {
  drawer.value.title = "修改广告";
  drawer.value.state = true;
  drawer.value.row = {...row};
}

// 删除
function remove(row, index) {
  Tips.confirm("您确定要删除该轮播图吗?").then(() => {
    API.removeAdvert(row.id).then(({data:ret}) => {
      if (ret.status) {
        data.value.splice(index, 1);
        Tips.success(ret.message);
      }
    })
  })
}

</script>